<template>
  <div class="app-container">
    <div v-if="account">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <account-card :account="account" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="信息修改" name="account">
                <account-info :account="account" @admin-update-account="adminUpdateAccount" />
              </el-tab-pane>
              <el-tab-pane v-if="roleFlag" :label="labelNames[account.role]" name="manage">
                <item-list :role="account.role" :account="account.account" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AccountCard from './components/AccountCard'
import AccountInfo from './components/AccountInfo'
import ItemList from './components/ItemList'
import { getAccountData, adminModifyAccount, getPsd } from '@/api/account'
import { queryBase } from '@/api/base'

export default {
  name: 'UserDetail',
  components: { AccountCard, AccountInfo, ItemList },
  data() {
    const IMAGE_FILE_NAME = 'userImage'
    return {
      activeTab: 'account',
      accountQueryList: {
        account: ''
      },
      account: {},
      labelNames: {
        '1': '所管基地',
        '4': '所管企业'
      },
      imgUrl: process.env.VUE_APP_BASE_IMAGE_API + IMAGE_FILE_NAME
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ]),
    roleFlag() {
      return this.account.role === 1 || this.account.role === 4
    }
  },
  created() {
    this.accountQueryList.account = this.$route.query.account // 获取用户账号
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getAccountData()
    },
    async getAccountData() { // 获取用户信息->account
      const res = await getAccountData(this.accountQueryList)
      const account = res.accountInfo
      if (account.image === '') {
        account.image = this.imgUrl + '/' + 'default.jpg'
      } else {
        account.image = this.imgUrl + '/' + account.image
      }
      account.role = res.role
      this.getPsd(account)
    },
    async getPsd(account) {
      const psd = await getPsd({
        account: this.accountQueryList.account
      })
      account.password = psd.account.password
      this.account = account
    },
    async adminUpdateAccount(params) {
      const res = await adminModifyAccount(params)
      if (res) {
        Object.assign(this.account, params)
        this.$message({
          type: 'success',
          message: '修改成功！'
        })
      }
    }
  }
}
</script>
<style scoped>
>>> .el-form-item {
  margin-bottom: 0;
}
</style>
